<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--

    吸附，但是并没有改变布局，，所以下面的元素不会抖动，，但是又被吸附了
-->
<style>
    .img{
        width: 100vw;
        height: 100vh;
        position: sticky;
        top: 0;
    }

*{
    margin: 0;
    padding: 0;
}
    dl dt{
        background-color: #efefef;
        color: #222;
        font-weight: bold;
        height: 40px;
        position: sticky;
        top: 0;
    }
    dl dd{
        height: 100px;
        border: 1px solid red;
    }
</style>


<div>
<!--    <img src="./imgs/2.png" alt="" class="img">-->
<!--    <img src="./imgs/3.png" alt="" class="img">-->
<!--    <img src="./imgs/4.png" alt="" class="img">-->
<!--    <img src="./imgs/1.png" alt=""  class="img">-->


    <div>
        <dl>
            <dt>A</dt>
            <dd>ant</dd>
            <dd>apple</dd>
        </dl>

        <dl>
            <dt>C</dt>
            <dd>cc</dd>
            <dd>call</dd>
            <dd>contribute</dd>
        </dl>


        <dl>
            <dt>d</dt>
            <dd>driven</dd>
            <dd>desc</dd>
            <dd>detail</dd>
        </dl>


        <dl>
            <dt>E</dt>
            <dd>egg</dd>
            <dd>expand</dd>
            <dd>end</dd>
        </dl>


        <dl>
            <dt>F</dt>
            <dd>flower</dd>
            <dd>float</dd>
            <dd>fee</dd>
        </dl>
    </div>
</div>
</body>
</html>
